<!DOCTYPE html>
<style type="text/css"> 
#tabs, #ui-datepicker-div, .ui-datepicker{
 font-size: 100%; 
 }
</style>
<html>
    <head> 
        <title>Tennis Messages</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/jquery-ui.css"/>
		<!--<link rel="stylesheet" media="all" type="text/css" href="css/datepicker.css" />-->
        <link href="css/style.css" rel="stylesheet" media="screen">
        <link href="css/default.css" rel="stylesheet" media="screen">
		
		<!--<link rel="stylesheet" href="datePicker/default.css" id="theme_base">
		<link rel="stylesheet" href="datePicker/default.date.css" id="theme_date">
		<link rel="stylesheet" href="datePicker/default.time.css" id="theme_time">-->
		 <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
		
		<script src="js/commonfunctions.js"></script>
        <script src="js/url.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-ui.min.js"></script>

		
		
		<!--<script type="text/javascript" src="js/datepicker.js"></script>-->
    </head>
<script>
$( document ).ready(function() {
	if(typeof localStorage["user_id"]=='undefined'){
		window.location="index.html";
	}
});
</script>
    <body>
        <div class="top_header">
            <div class="menu_pad">
                <div class="menu_left">
                <a href="invite.html"><img src="images/arrow_left_w.png"/>&nbsp;Messages</a></div>
                <!--<span class="menu_center"><a href="profile.html">Profile</a></span>-->
                <div class="menu_right"><a href="settings.html">Requirements</a></div>
                <div class="clearfix"></div>
            </div>
        </div>
		<div class="head_top_hg">
         <div class="invite_pad">
             <div class="textarea_field">
                 <p>Message</p>
                 <textarea id="message" name="message" placeholder="Message Here..."></textarea>
				 <span id="messageError" name="messageError" style="color:red"></span>
             </div>
         </div>
		 <!-- <div class="invite_pad">
             <div class="textarea_field">
                 <textarea id="venue" name="venue" placeholder="venue Here..."></textarea>
				 <span id="venueError" name="venueError" style="color:red"></span>
             </div>
         </div>-->
		 <div class="invite_pad">
		 <p>Venue</p>
		 <div class="invite_pad_venu">
             <div class="input_field">
                 <input type="text" id="streetAddress" name="streetAddress"  placeholder="Street Address"  />
				 <span id="streataddressError" name="streataddressError" style="color:red"></span>
			</div>
		 </div>
		 <div class="invite_pad_venu">
             <div class="input_field">
                 <input type="text" id="city" name="city"  placeholder="City"  />
				 <span id="cityError" name="cityError" style="color:red"></span>
			</div>
		 </div>
		 <div class="invite_pad_venu">
             <div class="input_field">
                 <input type="text" id="zipcode" name="zipcode"  placeholder="Zipcode" />
				 <span id="zipcodeError" name="zipcodeError" style="color:red"></span>
			</div>
		 </div>
		</div>
        <div class="invite_pad">
             <div class="input_field">
                 <p>Proposed Date and Time</p>
                 <input type="text" id="ProposedDate" name="ProposedDate"  placeholder="Proposed Date" readonly="readonly" />
				 <!--<input class="fieldset__input js__datepicker" type="text" placeholder="Date" name="input_prop_date" id="input_prop_date">
				<input class="fieldset__input js__timepicker" type="text" placeholder="Time" name="input_prop_time" id="input_prop_time">-->
				 <span id="ProposedDateError" name="ProposedDateError" style="color:red"></span>
             </div>
         </div>
        <div class="invite_pad">
             <div class="input_field">
                 <p>Until</p>
                <input type="text" name="untilDate" id="untilDate" placeholder="Until Date" readonly="readonly" />
				 <!-- <input class="fieldset__input js__datepicker" type="text" placeholder="Date" name="input_until_date" id="input_until_date">
				<input class="fieldset__input js__timepicker" type="text" placeholder="Time" name="input_until_time" id="input_until_time">-->
				 <span id="untilDateError" name="untilDateError" style="color:red"></span>
             </div>
         </div>
         <div class="invite_pad">
             <div class="submit_btn">
                 <input type="button"  value="Submit" onclick="userPost()"/>
				  <span id="inviteLoader"></span>
             </div>
         </div>
		</div>
    </body>
</html>
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css"/>
<script src="js/jquery.datetimepicker.js"></script>
<script type="text/javascript">
	$(function(){
		$('#ProposedDate').datetimepicker({
		format: 'd/m/Y g:i A',
		formatTime: 'g:i A',
		minDate : 0,
		numberOfMonths: 1,
			onSelect: function(selected){
			   $('#untilDate').datetimepicker("option","minDate",selected);
			}
		});
	});
	$(function(){
		$('#untilDate').datetimepicker({
			format: 'd/m/Y g:i A',
			formatTime: 'g:i A',
			minDate: 0,
	        numberOfMonths: 1,
			onSelect: function(selected){
				$("#ProposedDate").datetimepicker("option","maxDate", selected);
			}
		});
	});
</script>

<!--<script src="datePicker/jquery.min.js"></script>
<script src="datePicker/picker.js"></script>
<script src="datePicker/picker.date.js"></script>
<script src="datePicker/picker.time.js"></script>
<script src="datePicker/demo.js"></script>
<script>
//Today Date
	var date = new Date();
	var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();
    var today = dd+'-'+mm+'-'+yyyy;
	var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
	var splitArr = today.split('-');
	var yyyy = splitArr[2] ;
	var mm = months[splitArr[1]-1];
	var dd = splitArr[0] ;
	today_date_prop=dd+' '+mm+','+' '+yyyy;
//End
	
	var from_$input = $('#input_prop_date').pickadate(),
		from_picker = from_$input.pickadate('picker')

	var to_$input = $('#input_until_date').pickadate(),
		to_picker = to_$input.pickadate('picker')


	// Check if there’s a “from” or “to” date to start with.
	from_picker.set('min', today_date_prop);
	
	if ( from_picker.get('value') ) {
	  to_picker.set('min', from_picker.get('select'))
	}
	if ( to_picker.get('value') ) {
	  from_picker.set('max', to_picker.get('select'))
	}

	// When something is selected, update the “from” and “to” limits.
	from_picker.on('set', function(event) {
	  if ( event.select ) {
		to_picker.set('min', from_picker.get('select'))    
	  }
	  else if ( 'clear' in event ) {
		to_picker.set('min', false)
	  }
	})
	to_picker.on('set', function(event) {
	  if ( event.select ) {
		from_picker.set('max', to_picker.get('select'))
	  }
	  else if ( 'clear' in event ) {
		from_picker.set('max', false)
	  }
	})

</script>
-->